<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
            style="float:right"
            type="primary"
            @click="handleSearchList()"
            size="small">
          查询搜索
        </el-button>
        <el-button
            style="float:right;margin-right: 15px"
            @click="handleResetSearch()"
            size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" label-suffix="：" label-width="auto" size="small">
          <el-form-item label="模板名称" prop="templateName">
            <el-input clearable v-model="listQuery.templateName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input clearable v-model="listQuery.author" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="调用方式" prop="type">
            <el-select clearable filterable v-model="listQuery.type" style="width:100%">
              <el-option label="本地模板" value="0"></el-option>
              <el-option label="网络模板" value="1"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </div>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button type="warning" size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">
        添加
      </el-button>
    </el-card>

    <div class="table-container">
      <el-table :data="list"
                style="width: 100%;"
                v-loading="listLoading" border>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form class="demo-table-expand" label-width="auto" style="background-color: #eeeeee4f">
              <el-form-item label="网络调用地址: " v-if="scope.row.type === '1'">
                <div style="white-space: pre-wrap;">{{ scope.row.networkUrl }}</div>
              </el-form-item>
              <el-form-item label="继承GenTableCRUD的类: ">
                <div style="white-space: pre-wrap;">{{ scope.row.genCrud }}</div>
              </el-form-item>
              <el-form-item label="继承InitBaseProject的类: ">
                <div style="white-space: pre-wrap;">{{ scope.row.initBaseProject }}</div>
              </el-form-item>
              <el-form-item label="继承GenVueBase的类: ">
                <div style="white-space: pre-wrap;">{{ scope.row.genVue }}</div>
              </el-form-item>
              <el-form-item label="继承InitVueProject的类: ">
                <div style="white-space: pre-wrap;">{{ scope.row.initVueProject }}</div>
              </el-form-item>
              <el-form-item label="初始化菜单类: ">
                <div style="white-space: pre-wrap;">{{ scope.row.initTableMenu }}</div>
              </el-form-item>
              <el-form-item label="根据表生成所有crud代码的类: ">
                <div style="white-space: pre-wrap;">{{ scope.row.crudTool }}</div>
              </el-form-item>
              <el-form-item label="额外可调用方法: ">
                <div style="text-align: center;width: 90%">
                  <el-table :data="scope.row.additionTableMethodOptionEdit" border style="width: 100%;">
                    <el-table-column align="center" label="按钮名称" prop="btnName" width="160"/>
                    <el-table-column align="center" label="按钮描述" prop="desc"/>
                    <el-table-column align="center" label="调用类" prop="methodClass"/>
                    <el-table-column align="center" label="调用方法" prop="methodName" width="150"/>
                  </el-table>
                </div>
              </el-form-item>
              <el-form-item label="额外可选组件: ">
                <div style="text-align: center;width: 60%">
                  <el-table :data="scope.row.additionOptionEdit" border style="width: 100%;">
                    <el-table-column align="center" label="组件名称" prop="name"/>
                    <el-table-column align="center" label="组件描述" prop="desc"/>
                  </el-table>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="模板名称" align="center" prop="templateName" show-overflow-tooltip/>
        <el-table-column label="作者" align="center" prop="author" show-overflow-tooltip/>
        <el-table-column align="center" label="描述" prop="desc">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="showQuillContentFn(scope.row.desc)">查看</el-button>
            <el-button size="mini" type="warning" @click="handleUpdateDesc(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="使用指引" prop="guide">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="showQuillContentFn(scope.row.guide)">查看</el-button>
            <el-button size="mini" type="warning" @click="handleUpdateGuide(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column label="调用方式" align="center" prop="type">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == '0'" type="primary">本地模板</el-tag>
            <el-tag v-if="scope.row.type == '1'" type="success">网络模板</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="多数据源" prop="supportMutilDatasource">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.supportMutilDatasource == '0'" type="primary">不支持</el-tag>
            <el-tag v-if="scope.row.supportMutilDatasource == '1'" type="success">支持</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :current-page.sync="listQuery.current"
          :page-size="listQuery.pageSize"
          :page-sizes="[5,10,15]"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog title="编辑模板配置管理"
               :visible.sync="editDialogVisible" @close="handleDialogClose('editDialogRef')"
               destroy-on-close width="90%">
      <el-form :model="templateConfig" label-suffix="："
               :rules="formRule" ref="editDialogRef"
               label-width="auto" size="small">
        <el-form-item label="模板名称" prop="templateName">
          <el-input show-word-limit maxlength="255" :clearable="false" v-model="templateConfig.templateName"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input show-word-limit maxlength="255" clearable v-model="templateConfig.author"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="多数据源" prop="supportMutilDatasource">
          <el-radio-group v-model="templateConfig.supportMutilDatasource">
            <el-radio label="0">不支持</el-radio>
            <el-radio label="1">支持</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="调用方式" prop="type">
          <el-radio-group v-model="templateConfig.type">
            <el-radio label="0">本地模板</el-radio>
            <el-radio label="1">网络模板</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="网络调用地址" prop="networkUrl" v-if="templateConfig.type == '1'">
          <el-input show-word-limit maxlength="255" clearable v-model="templateConfig.networkUrl" type="textarea"
                    autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="继承GenTableCRUD的类" prop="genCrud">
          <el-input show-word-limit maxlength="255" :clearable="false" v-model="templateConfig.genCrud" type="textarea"
                    autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="继承InitBaseProject的类" prop="initBaseProject">
          <el-input show-word-limit maxlength="255" :clearable="false" v-model="templateConfig.initBaseProject"
                    type="textarea" autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="继承GenVueBase的类" prop="genVue">
          <el-input show-word-limit maxlength="255" :clearable="false" v-model="templateConfig.genVue" type="textarea"
                    autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="继承InitVueProject的类" prop="initVueProject">
          <el-input show-word-limit maxlength="255" :clearable="false" v-model="templateConfig.initVueProject"
                    type="textarea" autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="初始化菜单类" prop="initTableMenu">
          <el-input show-word-limit maxlength="255" clearable v-model="templateConfig.initTableMenu" type="textarea"
                    autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="根据表生成所有crud代码的类" prop="crudTool">
          <el-input show-word-limit maxlength="255" clearable v-model="templateConfig.crudTool" type="textarea" autosize
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="额外可调用方法">
          <div style="text-align: center;width: 100%">
            <div style="width: 100%;text-align: right">
              <el-button type="success" @click="addAdditionTableMethodOptionEdit">添加</el-button>
            </div>
            <el-table :data="additionTableMethodOptionEdit" border style="width: 100%;">
              <el-table-column align="center" label="按钮名称" prop="btnName" width="160">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.btnName" size="mini" style="width: 100%"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="按钮描述" prop="desc">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.desc" autosize size="mini" style="width: 100%"
                            type="textarea"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="调用类" prop="methodClass">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.methodClass" autosize size="mini" style="width: 100%"
                            type="textarea"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="调用方法" prop="methodName" width="150">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.methodName" size="mini" style="width: 100%"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button icon="el-icon-delete" size="mini" type="danger"
                             @click="deleteAdditionTableMethodOptionEdit(scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="额外可选组件">
          <div style="text-align: center;width: 60%">
            <div style="width: 100%;text-align: right">
              <el-button type="success" @click="addAdditionOptionEdit">添加</el-button>
            </div>
            <el-table :data="additionOptionEdit" border style="width: 100%;">
              <el-table-column align="center" label="名称" prop="name">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" size="mini" style="width: 100%"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="描述" prop="desc">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.desc" autosize size="mini" style="width: 100%"
                            type="textarea"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button icon="el-icon-delete" size="mini" type="danger"
                             @click="deleteAdditionOptionEdit(scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleEditDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增模板配置管理"
               :visible.sync="addDialogVisible" @close="handleDialogClose('addDialogRef')"
               width="90%">
      <el-form :model="templateConfig" label-suffix="："
               :rules="formRule" ref="addDialogRef"
               label-width="auto" size="small">
        <el-form-item label="模板名称" prop="templateName">
          <el-input show-word-limit maxlength="255" :clearable="false" v-model="templateConfig.templateName"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input show-word-limit maxlength="255" clearable v-model="templateConfig.author"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="多数据源" prop="supportMutilDatasource">
          <el-radio-group v-model="templateConfig.supportMutilDatasource">
            <el-radio label="0">不支持</el-radio>
            <el-radio label="1">支持</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="调用方式" prop="type">
          <el-radio-group v-model="templateConfig.type">
            <el-radio label="0">本地模板</el-radio>
            <el-radio label="1">网络模板</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="网络调用地址" prop="networkUrl" v-if="templateConfig.type==='1'">
          <el-input show-word-limit maxlength="255" clearable v-model="templateConfig.networkUrl" type="textarea"
                    autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="继承GenTableCRUD的类" prop="genCrud">
          <el-input show-word-limit maxlength="255" :clearable="false" v-model="templateConfig.genCrud" type="textarea"
                    autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="继承InitBaseProject的类" prop="initBaseProject">
          <el-input show-word-limit maxlength="255" :clearable="false" v-model="templateConfig.initBaseProject"
                    type="textarea" autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="继承GenVueBase的类" prop="genVue">
          <el-input show-word-limit maxlength="255" :clearable="false" v-model="templateConfig.genVue" type="textarea"
                    autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="继承InitVueProject的类" prop="initVueProject">
          <el-input show-word-limit maxlength="255" :clearable="false" v-model="templateConfig.initVueProject"
                    type="textarea" autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="初始化菜单类" prop="initTableMenu">
          <el-input show-word-limit maxlength="255" clearable v-model="templateConfig.initTableMenu" type="textarea"
                    autosize placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="根据表生成所有crud代码的类" prop="crudTool">
          <el-input show-word-limit maxlength="255" clearable v-model="templateConfig.crudTool" type="textarea" autosize
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="额外可调用方法">
          <div style="text-align: center;width: 100%">
            <div style="width: 100%;text-align: right">
              <el-button type="success" @click="addAdditionTableMethodOptionEdit">添加</el-button>
            </div>
            <el-table :data="additionTableMethodOptionEdit" border style="width: 100%;">
              <el-table-column align="center" label="按钮名称" prop="btnName" width="160">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.btnName" size="mini" style="width: 100%"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="按钮描述" prop="desc">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.desc" autosize size="mini" style="width: 100%"
                            type="textarea"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="调用类" prop="methodClass">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.methodClass" autosize size="mini" style="width: 100%"
                            type="textarea"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="调用方法" prop="methodName" width="150">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.methodName" size="mini" style="width: 100%"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button icon="el-icon-delete" size="mini" type="danger"
                             @click="deleteAdditionTableMethodOptionEdit(scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="额外可选组件">
          <div style="text-align: center;width: 60%">
            <div style="width: 100%;text-align: right">
              <el-button type="success" @click="addAdditionOptionEdit">添加</el-button>
            </div>
            <el-table :data="additionOptionEdit" border style="width: 100%;">
              <el-table-column align="center" label="名称" prop="name">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" size="mini" style="width: 100%"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="描述" prop="desc">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.desc" autosize size="mini" style="width: 100%"
                            type="textarea"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button icon="el-icon-delete" size="mini" type="danger"
                             @click="deleteAdditionOptionEdit(scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleAddDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :close-on-click-modal="false"
               :visible.sync="editDescDialogVisible" title="编辑描述" width="90%">
      <quill-editor v-model="templateConfig.desc"
                    :options="editorOption">
      </quill-editor>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="editDescDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleEditDialogConfirm('ignoreCheck')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :close-on-click-modal="false"
               :visible.sync="editGuideDialogVisible" title="编辑指引" width="90%">
      <quill-editor v-model="templateConfig.guide"
                    :options="editorOption">
      </quill-editor>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="editGuideDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleEditDialogConfirm('ignoreCheck')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="showQuillDialogVisible"
               title="查看" width="90%">
      <div class="ql-bubble">
        <div class="ql-editor" v-html="showQuillContent"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showQuillDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script>
import {templateConfigPostRequire} from '@/api/templateConfig';
import {quillEditor} from "vue-quill-editor";
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

const defaultListQuery = {
  current: 1,
  pageSize: 10,
  type: undefined,
  templateName: undefined,
  author: undefined,
}
const defaultTemplateConfig = {
  author: undefined,
  supportMutilDatasource: '0',
  genCrud: undefined,
  type: '0',
  initTableMenu: undefined,
  genVue: undefined,
  templateName: undefined,
  initBaseProject: undefined,
  initVueProject: undefined,
  id: undefined,
  additionComponent: undefined,
  crudTool: undefined,
  guide: undefined,
  desc: undefined,
  networkUrl: undefined,
}
export default {
  components: {
    quillEditor
  },
  name: 'templateConfigList',
  data() {
    return {
      editorOption: {
        // 一些配置项
        modules: {
          toolbar: [
            [{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], //引用，代码块
            [{'list': 'ordered'}, {'list': 'bullet'}], //列表
            [{'script': 'sub'}, {'script': 'super'}], // 上下标
            [{'indent': '-1'}, {'indent': '+1'}], // 缩进
            [{'direction': 'rtl'}], // 文本方向
            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
            [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
            [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
            [{'font': []}], //字体
            [{'align': []}], //对齐方式
            ['clean'], //清除字体样式
            ['image', 'link'] //上传图片、link
          ]
        }
      },
      additionOptionEdit: [],
      additionTableMethodOptionEdit: [],
      formRule: {
        templateName: [{required: true, message: "请输入模板名称", trigger: 'blur'}],
        genCrud: [{required: true, message: "请输入继承GenTableCRUD的类", trigger: 'blur'}],
        initBaseProject: [{required: true, message: "请输入继承InitBaseProject的类", trigger: 'blur'}],
        genVue: [{required: true, message: "请输入继承GenVueBase的类", trigger: 'blur'}],
        initVueProject: [{required: true, message: "请输入继承InitVueProject的类", trigger: 'blur'}],
        type: [{required: true, message: "请选择调用方式", trigger: 'blur'}],
      },
      listQuery: this.$deepClone(defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      addDialogVisible: false,
      editDialogVisible: false,
      templateConfig: this.$deepClone(defaultTemplateConfig),
      editDescDialogVisible: false,
      editGuideDialogVisible: false,
      showQuillDialogVisible: false,
      showQuillContent: '',
    }
  },
  created() {
    this.getList()
  },
  methods: {
    addAdditionTableMethodOptionEdit() {
      this.additionTableMethodOptionEdit.push({})
    },
    addAdditionOptionEdit() {
      this.additionOptionEdit.push({})
    },
    deleteAdditionTableMethodOptionEdit(item) {
      let arr = this.additionTableMethodOptionEdit || []
      let deleteIndex = -1
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].methodClass == item.methodClass && arr[i].methodName == item.methodName &&
            arr[i].desc == item.desc && arr[i].btnName == item.btnName) {
          deleteIndex = i
          break
        }
      }
      if (deleteIndex >= 0) {
        arr.splice(deleteIndex, 1);
      }
      this.additionTableMethodOptionEdit = arr
    },
    deleteAdditionOptionEdit(item) {
      let arr = this.additionOptionEdit || []
      let deleteIndex = -1
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].name == item.name && arr[i].desc == item.desc) {
          deleteIndex = i
          break
        }
      }
      if (deleteIndex >= 0) {
        arr.splice(deleteIndex, 1);
      }
      this.showSelectOptionEdit = arr
    },
    handleResetSearch() {
      this.listQuery = this.$deepClone(defaultListQuery)
    },
    handleSearchList() {
      this.listQuery.current = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.current = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    handleDialogClose(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate()
      }
    },
    handleAdd() {
      this.addDialogVisible = true
      this.additionOptionEdit = []
      this.additionTableMethodOptionEdit = []
      this.templateConfig = this.$deepClone(defaultTemplateConfig)
    },
    handleAddDialogConfirm() {
      this.$refs.addDialogRef.validate((valid) => {
        if (valid && !this.checkOptionEmpty()) {
          if (this.additionOptionEdit) {
            this.templateConfig.additionComponent = JSON.stringify(this.additionOptionEdit)
          }
          if (this.additionTableMethodOptionEdit) {
            this.templateConfig.additionTableMethod = JSON.stringify(this.additionTableMethodOptionEdit)
          }
          templateConfigPostRequire('add', this.templateConfig).then(response => {
            if (response) {
              this.$message({
                message: response.message,
                type: response.status ? 'success' : 'error'
              })
            }
            this.addDialogVisible = false
          }).finally(() => {
            this.getList()
          })
        }
      });
    },
    handleDelete(row) {
      this.$confirm('是否要删除该模板配置管理?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        templateConfigPostRequire('delete', {'id': row.id}).then(response => {
          if (response) {
            this.$message({
              message: response.message,
              type: response.status ? 'success' : 'error'
            })
          }
        }).finally(() => {
          this.getList()
        })
      })
    },
    handleUpdate(row) {
      this.templateConfig = this.$deepClone(row)
      let additionComponent = this.templateConfig.additionComponent
      if (additionComponent) {
        this.additionOptionEdit = JSON.parse(additionComponent)
      } else {
        this.additionOptionEdit = []
      }
      let additionTableMethod = this.templateConfig.additionTableMethod
      if (additionTableMethod) {
        this.additionTableMethodOptionEdit = JSON.parse(additionTableMethod)
      } else {
        this.additionTableMethodOptionEdit = []
      }
      this.editDialogVisible = true
    },
    handleUpdateDesc(row) {
      this.templateConfig = this.$deepClone(row)
      this.editDescDialogVisible = true
    },
    handleUpdateGuide(row) {
      this.templateConfig = this.$deepClone(row)
      this.editGuideDialogVisible = true
    },
    showQuillContentFn(content) {
      this.showQuillContent = content
      this.showQuillDialogVisible = true
    },
    checkOptionEmpty() {
      if (this.additionOptionEdit) {
        for (let i = 0; i < this.additionOptionEdit.length; i++) {
          if (!this.additionOptionEdit[i].name || !this.additionOptionEdit[i].desc) {
            this.$message({
              message: '额外组件请填写完整',
              type: 'error'
            })
            return true;
          }
        }
      }
      if (this.additionTableMethodOptionEdit) {
        for (let i = 0; i < this.additionTableMethodOptionEdit.length; i++) {
          if (!this.additionTableMethodOptionEdit[i].methodClass || !this.additionTableMethodOptionEdit[i].methodName ||
              !this.additionTableMethodOptionEdit[i].btnName || !this.additionTableMethodOptionEdit[i].desc) {
            this.$message({
              message: '额外方法请填写完整',
              type: 'error'
            })
            return true;
          }
        }
      }
      return false;
    },
    handleEditDialogConfirm(ignoreCheck) {
      if (ignoreCheck) {
        templateConfigPostRequire('update', this.templateConfig).then(response => {
          if (response) {
            this.$message({
              message: response.message,
              type: response.status ? 'success' : 'error'
            })
          }
          this.editDescDialogVisible = false
          this.editGuideDialogVisible = false
        }).finally(() => {
          this.getList()
        })
      } else {
        this.$refs.editDialogRef.validate((valid) => {
          if (valid && !this.checkOptionEmpty()) {
            if (this.additionOptionEdit) {
              this.templateConfig.additionComponent = JSON.stringify(this.additionOptionEdit)
            }
            if (this.additionTableMethodOptionEdit) {
              this.templateConfig.additionTableMethod = JSON.stringify(this.additionTableMethodOptionEdit)
            }
            templateConfigPostRequire('update', this.templateConfig).then(response => {
              if (response) {
                this.$message({
                  message: response.message,
                  type: response.status ? 'success' : 'error'
                })
              }
              this.editDialogVisible = false
            }).finally(() => {
              this.getList()
            })
          }
        });
      }
    },
    getList() {
      this.listLoading = true
      templateConfigPostRequire('listPage', this.listQuery).then(response => {
        this.listLoading = false
        this.list = response.data.records || []
        this.total = response.data.total
      })
    }
  }
}
</script>
<style>
.demo-table-expand label {
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 10px;
  width: 100%;
}
</style>
<style>/* 为对话框内容添加 Quill 样式 */
.show-quill-content .ql-snow .ql-editor {
  min-height: 200px;
}

@import '~quill/dist/quill.snow.css';
</style>